<template>
  <scroll-view 
    class="fu-scroll-list"
    scroll-x
    :scroll-with-animation="true"
    :show-scrollbar="false"
    @scroll="onScroll"
  >
    <view class="fu-scroll-list__wrapper">
      <view 
        v-for="(item, index) in list" 
        :key="index"
        class="fu-scroll-list__item"
        :class="{ 'fu-scroll-list__item--active': activeIndex === index }"
        :style="{ width: itemWidth }"
        @click="onItemClick(item, index)"
      >
        <!-- 图片 -->
        <image 
          v-if="item.image"
          class="fu-scroll-list__image"
          :src="item.image"
          mode="aspectFill"
        />
        
        <!-- 标题 -->
        <text class="fu-scroll-list__title">{{ item.title }}</text>
        
        <!-- 描述 -->
        <text 
          v-if="item.desc"
          class="fu-scroll-list__desc"
        >{{ item.desc }}</text>
      </view>
    </view>
  </scroll-view>
</template>

<script>
/**
 * fu-scroll-list 横向滚动列表组件
 * @description 用于展示横向滚动的列表内容
 * @property {Array} list - 列表数据
 * @property {String} itemWidth - 列表项宽度
 * @property {Number} activeIndex - 当前激活项的索引
 * @event {Function} click - 点击列表项时触发
 * @event {Function} scroll - 滚动时触发
 */
export default {
  name: 'fu-scroll-list',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    itemWidth: {
      type: String,
      default: '200rpx'
    },
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  emits: ['click', 'scroll'],
  methods: {
    onItemClick(item, index) {
      this.$emit('click', { item, index })
    },
    onScroll(event) {
      this.$emit('scroll', event)
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-scroll-list {
  width: 100%;
  white-space: nowrap;
  
  &__wrapper {
    display: inline-flex;
    padding: 20rpx;
  }
  
  &__item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: var(--fu-radius-base);
    transition: transform 0.2s ease;
    
    &:last-child {
      margin-right: 0;
    }
    
    &:active {
      transform: scale(0.98);
    }
    
    &--active {
      background-color: var(--fu-primary-color-light);
      
      .fu-scroll-list__title {
        color: var(--fu-primary-color);
      }
    }
  }
  
  &__image {
    width: 120rpx;
    height: 120rpx;
    border-radius: var(--fu-radius-base);
    margin-bottom: 16rpx;
  }
  
  &__title {
    font-size: 28rpx;
    line-height: 1.5;
    color: var(--fu-text-color);
    margin-bottom: 8rpx;
  }
  
  &__desc {
    font-size: 24rpx;
    line-height: 1.5;
    color: var(--fu-text-color-secondary);
    white-space: normal;
    text-align: center;
  }
}
</style> 